<template>
	<div v-show="contentLoaded">
		<CellSwipe
			@click="clickAddress(a.address_id)"
			v-for="a in list"
			:key="a.address_id"
		  :right="[
		    {
		      content: '删除',
		      style: { background: '#c7c7cc', color: '#fff', fontSize:'.4rem', height: '100%', lineHeight: '2rem', padding:'0 .2rem' },
		      handler: () => toRemove(a.address_id)
		    }, {
		      content: '编辑',
		      style: { background: '#fb4a4a', color: '#fff', fontSize:'.4rem', height: '100%',
				lineHeight: '2rem', padding:'0 .2rem'},
		      handler: () => toEdit(a.address_id)
		    }
		  ]">
		  	<div class="address-item" slot="title" @click="clickAddress(a.address_id)">
		  		<p>{{a.receive_name}} {{a.receive_mobile}}</p>
		  		<p>{{a.receive_province}}{{a.receive_city}}{{a.receive_area}}</p>
		  		<p class="grey">{{a.receive_address}}</p>
		  	</div>
		  </CellSwipe>
		  <div v-if="!list.length" class="middle-tip">暂无任何地址</div>
		  <router-link to="/address/edit/0" id="add_address">添加新地址</router-link>>
	</div>
</template>
<script>
import { Indicator, CellSwipe, MessageBox } from 'mint-ui'
import { mapGetters, mapActions } from 'vuex'
export default{
	name:'AddressList',
	created(){
		this.getAddressList()
	},
	data(){
		return {
			contentLoaded: false,
			commonStyle: {
				fontSize:'.4rem', height: '100%',
				lineHeight: '2rem', padding:'0 .2rem'
			}
		}
	},
	computed:{
		...mapGetters({
			list: 'address/list'
		}),
	},
	methods:{
		async getAddressList() {
			Indicator.open()
			await this.$store.dispatch('address/getAddressList')
			this.contentLoaded = true
			Indicator.close()
		},
		toEdit(id){
			this.$router.push(`/address/edit/${id}`)
		},
		async toRemove(id){
            try{
				await MessageBox.confirm('确定删除该地址吗？')
				Indicator.open();
				await  this.$store.dispatch('address/toRemove', id)
				Indicator.close();
			} catch(err) {
				// 关闭confirm
			}
		},
		clickAddress(addressId) {
            this.$store.commit('address/selectAddress', addressId)
            this.$router.go(-1)
		}
	},
	components:{ CellSwipe }
}
</script>
<style lang='less' scoped>
	.address-item{
		line-height: .6rem;
	    padding: .2rem;
	    font-size: .37rem;
	    border-bottom: 1px solid #bbb;
	}
	#add_address{
		width: 100%;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    background: #fb4a4a;
	    color: #fff;
	    height: 1.17rem;
	    line-height: 1.17rem;
	    font-size: .42rem;
	    text-align: center;
	}
</style>
